<template>
	<!-- 记录page -->
	<view class="container">
		<v-tabs v-model="current" :scroll="true" :tabs="navbar" field="name" activeColor="#1DD3B8" :bold="false" height="88rpx"
		 lineHeight="6rpx" lineColor="#1DD3B8" :fixed="true" lineScale="0.2">
		</v-tabs>
		<view class="tabs__list">
			<swiper class="tabs__swiper" :current="current" @change="changeSwiper">
				<!-- swiper-item/scroll-view 改为view  -->
				<swiper-item class="swiper-item" v-for="(item, index) in navbar" :key="item.id">
					<scroll-view class="scroll-view" scroll-y enable-back-to-top refresher-enabled :refresher-triggered="triggered"
					 style="height: 100%;">
						<view class="monitor-items">
							<monitor-items @click="toWarnEvent" :itemImg="warnImg" itemText="告警事件记录" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toDetail" :itemImg="historyImg" itemText="历史数据记录" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toDetail" :itemImg="passImg" itemText="人员通行记录" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toDetail" :itemImg="operateImg" itemText="操作日志" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toDetail" :itemImg="sysImg" itemText="系统日志" :itemIcon="toNext"></monitor-items>
						</view>
						<!-- <view class="load-more">
								<uni-load-more :status="status"></uni-load-more>
							</view> -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import monitorItems from '../../components/monitor-items/monitor-items.vue'
	export default {
		components: {
			monitorItems
		},
		data() {
			return {
				current: 0,
				navbar: [{
						id: 1,
						name: '历史记录'
					},
					{
						id: 2,
						name: '统计分析'
					}
				],
				warnImg: '../../static/image/record/warn.png',
				historyImg: '../../static/image/record/history.png',
				passImg: '../../static/image/record/pass.png',
				operateImg: '../../static/image/record/operate.png',
				sysImg: '../../static/image/record/system.png',
				toNext: '../../static/image/monitor/toNext.png'
			}
		},
		methods: {
			// swiper切换
			changeSwiper(e) {
				this.current = e.detail.current
				console.log(this.current)
			},
			// 跳转至详情界面
			toWarnEvent(e) {
				console.log('eee');
				uni.navigateTo({
					url: '/pages/warning-events/warning-events'
				})
			}
		}
	}
	
</script>

<style lang="scss">
	page {
		display: -webkit-box;
		width: 100%;
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;

		/* #endif */
		v-tabs {
			width: 100%;
			background-color: #FFF;
		}

		.tabs__list {
			width: 750rpx;
			margin-top: 20rpx;
			// margin-right: 24rpx;
			// width: 100%;
			box-sizing: border-box;
			flex: 1;
			overflow-y: scroll;

			// margin: 0 14rpx;
			// margin-bottom: 24rpx;
			.tabs__swiper {
				height: 100%;
				/* #ifdef H5 */
				height: calc(100% - 50px);

				/* #endif */
				.scroll-view {
					width: 100%;
				}

				.monitor-items {
					height: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-left: 20rpx;
					// margin-top: 20rpx;

					monitor-items {
						width: 50%;
					}
				}

				.load-more {
					padding-bottom: 10rpx;
				}
			}
		}
	}
</style>
